<template>
  <div>
    <!-- 树形展开 -->
    <div v-if="canHide" class="treemenu-open" @click="showHideLeftTree(true)"><svg-icon class-name="icon" icon-class="shuangjiantouyou" /></div>
    <!-- 树形展开 -->
    <div class="org-tree-box">
      <div class="tree-header">
        <!-- <div class="title" style="font-size:14px">图册</div> -->
        <div class="search">
          <el-input v-model="filterText" size="mini" placeholder="搜索图册">
            <svg-icon slot="prefix" class-name="tree-search-icon" icon-class="sousuo-solid" />
          </el-input>
        </div>
      </div>
      <div v-loading="orgTreeLoading" class="tree-list" :style="{height: newHeight+'px'}">
        <el-scrollbar class="page-scrollbar">
          <el-tree
            ref="refTree"
            :data="treeList"
            node-key="id"
            :props="defaultProps"
            :show-checkbox="showCheckbox"
            :filter-node-method="filterNode"
            :expand-on-click-node="false"
            :default-expanded-keys="expandedTreeKey"
            default-expand-all
            @node-click="treeNodeClick"
          >
            <div slot-scope="{ node, data }" class="custom-tree-node">
              <div class="name-text-box">
                <!-- <svg-icon class-name="wenjianjia" icon-class="wenjianjia-color" /> -->
                <span class="name-text" :title="node.label">{{ node.label }}</span>
              </div>
            </div>
          </el-tree>
        </el-scrollbar>
      </div>
      <!-- 树形收缩 -->
      <div v-if="canHide" class="treemenu-close" @click="showHideLeftTree(false)"><svg-icon class-name="icon" icon-class="shuangjiantouzuo" /></div>
      <!-- 树形收缩 -->
    </div>
  </div>
</template>

<script>
import { searchAtlas } from '@/api/shopauxPlat/atlasManagement'
export default {
  name: 'AtalsTree',
  components: {},
  props: {
    height: {
      type: Number,
      default() {
        return null
      }
    },
    showAdd: {
      type: Boolean,
      default() {
        return false
      }
    },
    showCheckbox: {
      type: Boolean,
      default: false
    },
    canHide: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      orgTreeLoading: false,
      newHeight: this.height,
      filterText: '',
      treeList: [],
      defaultProps: {
        children: 'next',
        label: 'atlasName'
      },
      expandedTreeKey: []
    }
  },
  computed: {},
  watch: {
    filterText(val) {
      this.$refs.refTree.filter(val)
    }
  },
  mounted() {

  },
  created() {
    this.getAtlasTree()
  },
  methods: {
    getAtlasTree() {
      const data = new FormData()
      data.append('pageFlag', false)
      searchAtlas(data).then(res => {
        this.treeList = (res.data && res.data.records) || []
      })
    },
    // 树形菜单过滤
    filterNode(value, data) {
      if (!value) return true
      return data.atlasName.indexOf(value) !== -1
    },
    // 组织树点击
    treeNodeClick(data, node, treeNode) {
      this.$emit('node-click', data, node, treeNode)
    },
    // 高度计算
    treeHeight() {
      this.$nextTick(() => {
        if (self !== top) {
          this.newHeight = window.innerHeight - 90
        } else {
          this.newHeight = window.innerHeight - 187
        }
      })
    },
    // 关闭树形菜单
    showHideLeftTree(show) {
      const left = document.querySelector('.org-tree-box')
      const open = document.querySelector('.treemenu-open')
      if (show) {
        left.classList = 'org-tree-box'
        open.classList = 'treemenu-open'
      } else {
        left.classList = 'org-tree-box hide'
        open.classList = 'treemenu-open show'
      }
      this.$emit('tree-show-hide', show)
    }
  }
}
</script>
<style lang='scss' scoped>
.org-tree-box{
  padding-bottom:20px;
}
.tree-header{
  padding: 5px;
  display: flex;
  align-items: center;
  .search{
    flex: 1;
    padding: 0;
    margin-bottom: 0;
    box-sizing: border-box;
  }
}
.tree-search-icon{
  color: #999 !important;
}
.tree-list{
  height: calc(100vh - 120px) !important;
}
</style>
